<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="8">
        <TitleElcard title="分类商品数量图(饼图)">
          <PieEchart :data="data" />
        </TitleElcard>
      </el-col>
      <el-col :span="8">
        <TitleElcard title="各类商品销量">
          <CategoryEchart v-bind="categoryData" />
        </TitleElcard>
      </el-col>
      <el-col :span="8">
        <TitleElcard title="分类玫瑰图">
          <RoseEchart :data="roseData" />
        </TitleElcard>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <TitleElcard title="喜欢的种类">
          <LineEchart v-bind="lineData" />
        </TitleElcard>
      </el-col>
      <el-col :span="12">
        <TitleElcard title="各地销量">
          <BarEchart v-bind="barData" />
        </TitleElcard>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue"
import { useStore } from "vuex"
import { IRootWithModel } from "@/types/userType"
import TitleElcard from "@/base_ui/elcard"
import PieEchart from "@/components/page-echarts"
import { RoseEchart, LineEchart, BarEchart, CategoryEchart } from "@/components/page-echarts"

export default defineComponent({
  name: "dashboard",

  components: {
    TitleElcard,
    PieEchart,
    RoseEchart,
    LineEchart,
    BarEchart,
    CategoryEchart,
  },
  setup() {
    const store = useStore<IRootWithModel>()

    store.dispatch("dashboard/getGoodsCountAction", "/goods/category/count")
    store.dispatch("dashboard/getGoodsSaleAction", "/goods/category/sale")
    store.dispatch("dashboard/getGoodsFavorAction", "/goods/category/favor")
    store.dispatch("dashboard/getAddressSaleAction", "/goods/address/sale")

    const data = computed(() => {
      return store.state.dashboard.categoryGoodsCount.map((item: any) => {
        return { name: item.name, value: item.goodsCount }
      })
    })

    const roseData = computed(() => {
      return store.state.dashboard.categoryGoodsSale.map((item: any) => {
        return { name: item.name, value: item.goodsCount }
      })
    })

    const lineData = computed(() => {
      const xLabels: string[] = []
      const yLabels: number[] = []

      store.state.dashboard.categoryGoodsFavor.forEach((item) => {
        xLabels.push(item.name)
        yLabels.push(item.goodsFavor)
      })

      return {
        xLabels,
        yLabels,
      }
    })

    const barData = computed(() => {
      const xLabels: string[] = []
      const yLabels: number[] = []
      store.state.dashboard.addressGoodsSale.forEach((item) => {
        xLabels.push(item.address)
        yLabels.push(item.count)
      })

      return {
        xLabels,
        yLabels,
      }
    })

    const categoryData = computed(() => {
      const labels: string[] = []
      const value: number[] = []
      store.state.dashboard.categoryGoodsFavor.forEach((item) => {
        labels.push(item.name)
        value.push(item.goodsFavor)
      })

      return {
        labels,
        value,
      }
    })

    return {
      data,
      roseData,
      lineData,
      barData,
      categoryData,
    }
  },
})
</script>

<style scoped>
.el-row:nth-of-type(2) {
  margin-top: 20px;
}
</style>
